Ext.onReady(function(){
	////// user grid
    var User = Ext.data.Record.create([
	   // the "name" below matches the tag name to read, except "availDate"
	   // which is mapped to the tag "availability"
	   {name: 'id'},
	   {name: 'userId'},
	   {name: 'name'},
	   {name: 'email'}
	]);
      
	var store = new Ext.data.Store({
    	url: Myfuse.ContextPath + '/user.do?action=query',
    	reader: new Ext.data.JsonReader({
    		root: 'content',
    		totalProperty: 'total',
    		id: 'id'
    	}, User),
        listeners: {
        	'add': function(store, records, index) {
        		if (console) console.info('add, ' + index);
//        		store.customBuffer.add[store.customBuffer.add.length] = records[0];
        		Ext.each(records, function() {
        			console.info(this);
        			this.custom.state = 'add';
        		});
//        			record.custom = {};
//        			record.custom.state = 'add';
        			
        	},
        	'update': function(store, record, operation) {
        		if (console) console.info(operation + ', ' + record);
        		if (operation == Ext.data.Record.EDIT) {
//        			if (store.customBuffer.add.indexOf(record) == -1 || store.customBuffer.update.indexOf(record) == -1) {
//        				store.customBuffer.update[store.customBuffer.update.length] = record;
//        			}
        		}
        		if (operation == Ext.data.Record.REJECT) {
//        			store.customBuffer.update.remove(record);
        		}
        		if (operation == Ext.data.Record.COMMIT) {
        			/// commit data
        			console.info(record);
        		}
        	},
        	'remove': function(store, record, index) {
        		if (console) console.info('remove, ' + index);
//        		store.customBuffer.remove[store.customBuffer.remove.length] = record;
        	}
        }
    });
    store.customBuffer = {};
    store.customBuffer.add = [];
    store.customBuffer.update = [];
    store.customBuffer.remove = [];
    
	var grid = new Ext.grid.EditorGridPanel({
		id: 'grid',
//    	renderTo: 'user-grid-div',
		region:'center',
		margins:'0 5 5 5',
        store: store,
        columns: [
            {header: "id", width: 200, editor: new Ext.form.TextField(), dataIndex: 'id'},
            {header: "userId", width: 100, editor: new Ext.form.TextField(), dataIndex: 'userId'},
            {header: "name", width: 100, editor: new Ext.form.TextField(), dataIndex: 'name'},
            {header: "email", width: 250, editor: new Ext.form.TextField(), width: 150, dataIndex: 'email'}
        ],
        stripeRows: true,
        title: 'Grid',
	    sm: new Ext.grid.RowSelectionModel(),
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            paramNames: {start: 'start', limit: 'limit', total: 'total'}
        }),
        listeners: {
//        	'rowclick': function(grid, rowIndex, e) {
//        		//alert('you click ' + rowIndex);
//        	}
        },
        tbar: [{
			text: 'New',
			handler: function(button, e) {
				var user = new User({
					id: '',
					userId: '',
					name: '',
					email: ''
				});
				user.custom = {};
				user.custom.state = 'oo';
				console.info(user);
				grid.getStore().insert(0, user);
			}
		}, '-', {
			text: 'Edit',
			handler: function(button, e) {
			}
		}, '-', {
			text: 'Remove',
			handler: function(button, e) {
				var record = grid.getSelectionModel().getSelected();
				if (record) {
					grid.getStore().remove(record);
					grid.getSelectionModel().selectNext();
					grid.getSelectionModel().selectPrevious();
				}
			}
		}, '-', {
			text: 'Cancel',
			handler: function(button, e) {
				var record = grid.getSelectionModel().getSelected();
				if (record) {
					record.reject();
				}
			}
		}, '-', {
			text: 'Submit',
			handler: function(button, e) {
				console.info('Submit');
				var records = grid.getStore().getModifiedRecords();
				var data = records[0].data;
				var conn = new Ext.data.Connection();
			    conn.request({
			    	url: Myfuse.ContextPath + '/user.do?action=saveJson',
			    	params: {type: 'edit'},
			    	jsonData: data,
			    	success: function() {
			    		Ext.Msg.alert('ok');
			    	},
			    	failture: function() {
			    		Ext.Msg.alert('fail');
			    	}
			    })
//				console.info(store.customBuffer);
				grid.getStore().commitChanges();
			}
		}]
        
    });
    
    var viewport = new Ext.Viewport({
		layout:'border',
        items:[grid]
	});
    
    store.load({params:{start:0, limit:25}});
    
    var SubmitRecords = {
    	add: {},
    	update: {},
    	remove: {}
    }
    
});